<script lang="ts" setup>
	import { ref, reactive,getCurrentInstance } from 'vue'
	import { useRouter } from 'uni-mini-router'
	import { onShow, onHide, onReachBottom } from '@dcloudio/uni-app';
	import DaDropdown from '@/components/da-dropdown/index.vue'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const router = useRouter()
	let src = ref('https://cdn.uviewui.com/uview/album/1.jpg')
	const { proxy } = getCurrentInstance()

	// import cityAllData from '@/common/cityAllData.js'
	// import categoryList from '@/common/categoryList.js'
	// let newCityData = ref(cityAllData)
	// let newCategoryList = ref(categoryList)

	// let obj = {
	// 	name: '不限',
	// 	id: '',
	// 	chindren: []
	// }
	// if (newCityData.value[0].id != '') {
	// 	newCityData.value.unshift(obj)
	// }
	// if (newCategoryList.value[0].id != '') {
	// 	newCategoryList.value.unshift(obj)
	// }
	


	//时间
	let time = []
	//区域id
	let areaid = ref()
	//职业id
	let jobid = ref()
	//关键字
	let keyword = ref()
	let sortList = ref([])
	let jobList = ref([])
	let timer = null
	let pageNo = 1
	let total = ref(0)
	const employTo = (e) => {
		router.push({
			name: "employWorkerDetils",
			params: {
				id: e.id
			}
		})
	}
	
	const state = reactive({
		provinceId:'',
		cityId:'',
		areaId:'',
		jobId:'',
		time:{},
		keyword:''
	})
	const DaDropdownRef = ref()
	const dropdownMenuList = ref([
		{
			title: '日期',
			type: 'daterange',
			prop: 'time',
		},
		{
			title: '区域',
			type: 'picker',
			prop: 'city',
			showIcon: true,
			field: {
				label: 'name',
				value: 'id',
				children: 'children',
			},
			options: userStoreInfo.addressList,
			// 获取远程数据
			// syncDataFn: getMockServiceData,
		},
		
		{
			title: '职位',
			type: 'cell',
			prop: 'jobId',
			// showAll: true,
			showIcon: true,
			field: {
				label: 'name',
				value: 'id',
				children: 'chindren',
			},
			value: '',
			options: userStoreInfo.getJobList,
		},
	])
	const handleConfirm = (v) => {
		if (v.city) {
			if (v.city[0] != null && JSON.stringify(v.city[0])!='{}') {
				state.areaId = (v.city && v.city.length > 2) ? v.city[2] : ''
				state.cityId = (v.city && v.city.length > 1) ? v.city[1] : ''
				state.provinceId = (v.city && v.city.length > 0) ? v.city[0] : ''
			} else {
				state.areaId = ''
				state.cityId = ''
				state.provinceId = ''
				dropdownMenuList.value[1].value = []
			}
	
		} else if (v.categoryName) {
			state.categoryName = v.categoryName[v.categoryName.length - 1]
		} else {
			Object.keys(v).forEach(key => {
				state[key] = v[key]
			})
		}
	
		pageNo = 1;
		sortList.value = []
		getCompanyDetail()
	}
	const handleClose = (v) => {
		console.log('handleClose ==>', v)
	}
	const handleOpen = (v) => {
		console.log('handleOpen ==>', v)
	}
	const handleSwitchChange = (event, item, index) => {
		console.log('handleSwitchChange ==>', event, item, index)
		dropdownMenuList.value[index].value = event.detail.value === true ? 1 : 0
		// 操作完成后关闭弹窗
		DaDropdownRef.value?.handlePopupHide()
	}
	
	onShow(() => {
		pageNo = 1;
		sortList.value = []
		getJobList()
	})
	onHide(() => {
	})
	onReachBottom(() => {
		if (total.value > sortList.value.length) {
			pageNo++
			getCompanyDetail()
		}
	})
	const getJobList = () => {
		proxy.$req('GET', proxy.$api.getJobList, {
			pageNo: 1,
			pageSize: 100
		}).then((res) => {
			if (res.code === 200) {
				let list = []
				res.result.records.forEach(e => {
					list[e.id] = e.name
				})
				jobList.value = list

			}
			getCompanyDetail()
		})
	}
	const getCompanyDetail = () => {
		const par = {
			pageNo,
			pageSize: 10,
			areaId:state.areaId,
			jobId:state.jobId,
			firstDate:state.time.start?state.time.start:'',
			lastDate:state.time.end?state.time.end:'',
			keyword: state.keyword
		}
		// if (time.length > 1) {
		// 	par.firstDate = time[0]
		// 	par.lastDate = time[1]
		// }
		// if (areaid.value) {
		// 	par.areaId = areaid.value
		// }
		// if (jobid.value) {
		// 	par.jobId = jobid.value
		// }
		// if (keyword.value) {
		// 	par.keyword = keyword.value
		// }
		//获取列表
		proxy.$req('GET', proxy.$api.checkShortWorkers, par).then((res) => {
			if (res.code === 200) {
				sortList.value = sortList.value.concat(res.result.records.map(e => {
					e.sextext = e.sex === 0 ? '男' : e.sex === 1 ? '女' : '未知'
					// let idx = jobList.value.findIndex(el=>el.id == e.jobId)
					// if(idx!=-1){
					// 	e.jobtext = jobList.value[idx].name
					// }else{
					// 	e.jobtext = ''
					// }
					e.jobtext = jobList.value[e.jobId]
					return e
				}))
				total.value = res.result.total
			}
		})
	}

	// const searchPage = () => {
	// 	router.push({
	// 		name: 'jobSearchPage',
	// 		params: {
	// 			type: 'employWorker'
	// 		}
	// 	})
	// }
	
	const authRoleBtn = ()=>{
		router.push({
			name: 'authRole',
		})
	}
	const searchResult = ()=>{
		pageNo = 1;
		sortList.value = []
		getCompanyDetail()
	}
</script>

<template>
	<u-navbar class="navbar" bgColor="rgb(255, 255, 255)" :placeholder="true" title="" :autoBack="true">
		<template #right>
			<view style="width: 600rpx;">
				<u-search placeholder="搜索关键词" v-model="state.keyword" shape="square" :showAction="false" @search="searchResult"></u-search>
			</view>
		</template>
	</u-navbar>
	<view class="alert" v-if="userStoreInfo.userInfo.shoppingStore && userStoreInfo.userInfo.shoppingStore.isReal==0">
		<view class="text">
			企业未认证，认证后可开启招聘
		</view>
		<view class="btn" @click="authRoleBtn">
			去认证
		</view>
	</view>

	<view class="main">
		<view class="DaDropdown-main">
			<DaDropdown ref="DaDropdownRef" v-model:dropdownMenu="dropdownMenuList" themeColor="#CB645E"
				textColor="#333333" :duration="300" :fixedTop="false" :menuActiveText="false" @confirm="handleConfirm"
				@close="handleClose" @open="handleOpen">
			<!-- 	<template #god7="{item,index}">
					<view style="padding: 40px">
						自定义插槽内容
						<switch :checked="item.value === 1" @change="(e) => handleSwitchChange(e, item,index)" />
						<text>{{ item.value === 1 ? '激活' : '未激活' }}</text>
					</view>
				</template> -->
			</DaDropdown>
		</view>
	<!-- 	<view class="tab">
			<view class="collapse">
				<view>时间</view>
				<view>区域</view>
				<view>职业</view>
			</view>
			<view class="pop">
				xianshineironhg
			</view>
		</view> -->
		<view class="card" v-for="(e,i) in sortList" :key="i">
			<view class="info">
				<u-avatar :src="e.headImage||''" style="margin-right: 16rpx;"></u-avatar>
				<view>
					<view class="name">
						{{e.username||''}}
					</view>
					<view class="subTag">
						<text>{{e.sextext}}</text>
						<u-line direction="col" length="32rpx" margin="2rpx 20rpx" color="#898989"></u-line>
						<text>{{e.workeAge||''}}年</text>
						<u-line direction="col" length="32rpx" margin="2rpx 20rpx" color="#898989"></u-line>
						<text>{{e.jobtext}}</text>
					</view>
					<view class="subPrice">
						<text>{{e.hourFee||''}}元/小时</text>
						<u-line direction="col" length="32rpx" margin="2rpx 20rpx" color="#646464"></u-line>
						<text>{{e.dailyFee||''}}元/天</text>
					</view>
				</view>
			</view>
			<view class="employBtn" @click="employTo(e)">
				雇佣
			</view>
		</view>
	</view>
</template>


<style lang="scss">
	page {
		background-color: rgb(241, 243, 244);
	}

	.alert {
		height: 88rpx;
		background-color: rgb(242, 230, 231);
		color: rgb(254, 108, 110);
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding: 0 30rpx;

		.btn {
			background-color: rgb(254, 108, 110);
			color: #fff;
			border-radius: 48rpx;
			padding: 12rpx 30rpx;
		}
	}

	.main {
		.DaDropdown-main{
			margin-bottom: 20rpx;
		}

		.card {
			background-color: rgb(250, 250, 251);
			height: 250rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;


			margin: 0 24rpx 24rpx;
			// margin: 30rpx auto;
			padding: 30rpx 20rpx;
			background: #fff;
			border-radius: 24rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);


			.info {
				margin: 0 20rpx;
				display: flex;
				align-items: flex-start;
				;

				.name {
					font-size: 36rpx;
					font-weight: 900;
				}

				.subTag {
					display: flex;
					font-size: 24rpx;
					color: rgb(137, 137, 137);
					margin: 24rpx 0;
				}

				.subPrice {
					display: flex;
					color: rgb(100, 100, 100);
					font-size: 26rpx;
				}
			}

			.employBtn {
				background-color: #CB645E;
				color: #fff;
				height: 74rpx;
				font-size: 30rpx;
				line-height: 74rpx;
				width: 155rpx;
				border-radius: 14rpx;
				text-align: center;
				margin: 0 20rpx;
				transform: translateY(-40rpx);
			}
		}
	}
</style>